<template>
  <div class="item">
    <div class="it_td">
      <div class="time">{{ _pay_time }}</div>
      <div class="td_inf">{{ _status }}</div>
    </div>
    <div class="it_com">
      <ul class="main">
        <li v-for="(item, i) in cartInfo" :key="i">
          <div
            class="img"
            @click="goDetail(item.productInfo.attrInfo.product_id)"
          >
            <img v-lazy="item.productInfo.attrInfo.image" alt="" />
          </div>

          <div class="box" @click="goOrderDetail(order_id)">
            <div class="info">
              {{ item.productInfo.store_name }}
            </div>
            <div class="pc">
              <p class="price">￥{{ item.productInfo.attrInfo.price }}</p>
              <p class="count">x{{ item.cart_num }}</p>
            </div>
          </div>
        </li>
      </ul>
      <div class="total">
        一共{{ cartInfo.length }}件商品，总金额为<span>￥{{ pay_price }}</span>
      </div>
    </div>
    <div class="it_btn">
      <a v-if="status == 0" class="cancel" @click="cancelOrder">取消订单</a>
      <a class="check" v-if="status == 0" @click="setPay">立即支付</a>
      <a class="pay"  v-if="status == 1" @click="goOrderDetail(order_id)">查看详情</a>
    </div>

    
  </div>
</template>

<script>
import { Dialog } from "vant";

export default {
  data(){
    return{
     
    }
  },
  props: {
    id: {
      type: Number,
    },
    order_id: {
      type: String,
    },
    _pay_time: {
      type: String,
    },
    _add_time: {
      type: String,
    },
    cartInfo: {
      type: Array,
    },
    pay_price: {
      type: String,
    },
    status: {
      type: Number,
    },
  },
  computed: {
    _status() {
      if (this.status == 0) {
        return "未支付";
      } else if (this.status == 1) {
        return "未发货";
      } else if (this.status == 2) {
        return "未评价";
      } else if (this.status == 3) {
        return "未收货";
      } else {
        return "已完成";
      }
    },
  },
  methods: {
    goDetail(id) {
      this.$router.push("/detail/" + id);
    },
    goOrderDetail(id) {
      this.$router.push("/order/detail/" + id);
    },
    cancelFn() {
      this.list = [];
      let token = localStorage.getItem("token");

      axios({
        url: `/api/order/cancel`,
        method: "POST",
        data: {
          id: this.order_id,
        },
        headers: {
          "Authori-zation": "Bearer " + token,
        },
      }).then((res) => {
        console.log("成功", res);
        this.$emit("cancel-order", this.order_id);
      });
    },

    cancelOrder() {
      Dialog.confirm({
        title: "提示",
        message: "你确定要取消订单吗",
      })
        .then(() => {
          this.cancelFn();
        })
        .catch(() => {
          // on cancel
        });
    },

    setPay(){
      this.$emit('set-pay',{show:true,order_id:this.order_id})
    }
    
  },
};
</script>

<style lang="scss" scoped>
.item {
  background-color: #fff;
  border-radius: 8px;
}
.it_td {
  height: 41px;
  line-height: 41px;
  padding: 0px 15px;
  font-size: 14px;
  border-bottom: 1px solid #eee;
  display: flex;
  justify-content: space-between;
  .time {
    color: #282828;
  }
  .td_inf {
    color: #fc4141;
  }
}
.it_com {
  padding: 0px 10px 15px;
  border-bottom: 1px solid #eee;
  .main {
    li {
      display: flex;
      margin-top: 10px;
      .img {
        width: 60px;
        height: 60px;
        border-radius: 8px;
        overflow: hidden;
        > img {
          width: 100%;
          height: 100%;
        }
      }

      .box {
        flex: 1;
        padding-left: 12px;
        display: flex;
        justify-content: space-between;
        .info {
          // margin-left: 15px;
          // margin-top: 5px;
          width: 153px;
          height: 34px;
          font-size: 14px;
          display: -webkit-box; /*对象作为伸缩盒子模型展示*/
          -webkit-box-orient: vertical; /*设置或检索伸缩盒子对象的子元素的排列方式*/
          -webkit-line-clamp: 2; /*显示的行数*/
          overflow: hidden; /*隐藏超出的*/
          text-overflow: ellipsis;
          font-size: 13px;
        }
        .pc {
          height: 50px;
          text-align: right;

          color: #999;
          font-size: 14px;
        }
      }
    }
  }
  .total {
    text-align: right;
    font-size: 14px;
    color: #282828;
    span {
      font-weight: 700;
      color: #fc4141;
    }
  }
}
.it_btn {
  text-align: right;
  a {
    margin: 12px 0;
    display: inline-block;
    width: 88px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 15px;

    font-size: 13.5px;
  }
  .check {
    background-color: #e93323;

    color: #fff;
  }
  .cancel {
    border: 1px solid #ddd;
    color: #aaa;
    vertical-align: middle;
    margin-right: 15px;
  }
  .pay {
    background-color: #e93323;

    color: #fff;
  }
}

/deep/ .van-dialog {
  border-radius: 0px !important;
}
</style>

